<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { roleStore } from '@/stores/role'
import { headersStore } from '@/stores/apiHeader'
//  全球变动支出（累计)
import CumulativeExpenseStart from '@/components/PermissionsModule/Finance/components/CumulativeExpenseStart.vue'
// 全球固定支出总额趋势
import FixedExpensesAmount from '@/components/PermissionsModule/Finance/components/FixedExpensesAmount.vue'
// 固定支出总额同比增长情况
import FixedExpensesAmountYOY from '@/components/PermissionsModule/Finance/components/FixedExpensesAmountYOY.vue'
// 全球重点变动支出对比
import KeyExpenditureComparison from '@/components/PermissionsModule/Finance/components/KeyExpenditureComparison.vue'
// （全球月，区域月，国家月）固定支出
import FixedExpenses from '@/components/PermissionsModule/Finance/components/FixedExpenses.vue'
// 固定支出总额同环比
import FixedExpensesAmountYoyQoq from '@/components/PermissionsModule/Finance/components/FixedExpensesAmountYoyQoq.vue'
// 各区变动支出对比
import AreaExpenditureComparison from '@/components/PermissionsModule/Finance/components/AreaExpenditureComparison.vue'
// 变动支出（成本）占比趋势
import VariableExpensesCost from '@/components/PermissionsModule/Finance/components/VariableExpensesCost.vue'
// 固定支出总额同比增长情况（各区年，各区月，各国年，各国月）
import FixedExpensesAmountYoyGrow from '@/components/PermissionsModule/Finance/components/FixedExpensesAmountYoyGrow.vue'
// （各区，各国）固定支出总额与占比 月
import TsotalSumAndRatio from '@/components/PermissionsModule/Finance/components/TsotalSumAndRatio.vue'
const store = roleStore() as any
const { financeLevel } = store
const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = financeLevel
}
info()

// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = financeLevel // 初始化面板权限
//获取当前月份
const month = computed(() => {
  return headersStore().month
})
// 区分全球区域对比或国家对比  0各个区域，1 各个国家 默认空
const every_code = computed(() => {
  return headersStore().every_code
})
// 深度监听 store.panelPermissions
watch(
  () => store.financeLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
const props = defineProps({
  showRemainingComponents: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <CumulativeExpenseStart v-if="month === '00' && every_code == ''" />
  <VariableExpensesCost v-if="month === '00' && every_code != ''" />
  <KeyExpenditureComparison v-if="month !== '00' && every_code == ''" />
  <AreaExpenditureComparison v-if="every_code !== '' && month !== '00'" />
  <div v-if="showRemainingComponents">
    <FixedExpensesAmountYOY v-if="month === '00' && every_code == ''" />
    <FixedExpenses v-if="month !== '00' && every_code == ''" />
    <FixedExpensesAmountYoyQoq v-if="month !== '00'" />
    <TsotalSumAndRatio v-if="month !== '00' && every_code !== ''" />
    <FixedExpensesAmountYoyGrow v-if="every_code != ''" />
    <FixedExpensesAmount v-if="month === '00'" />
  </div>
</template>
<style lang="scss" scoped></style>
